<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>demo</title>

    <!-- Bootstrap 3.3.5 -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Theme style -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/framework/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <%--<link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/framework/dist/css/skins/skin-cdb.css">

    <!-- jQuery 2.1.4 -->
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

    <!-- Bootstrap 3.3.5 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-table/dist/bootstrap-table.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-table/dist/bootstrap-table.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

    <link href="//cdn.bootcss.com/bootstrap3-dialog/1.34.6/css/bootstrap-dialog.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/bootstrap3-dialog/1.34.6/js/bootstrap-dialog.min.js"></script>


    <%--时间选择器--%>
    <link href="//cdn.bootcss.com/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-datepicker/1.5.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>


    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/core_style.css">
    <link href="${pageContext.request.contextPath}/static/css/button_demo1.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}/static/css/c3.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/static/js/d3.v3.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/c3.js"></script>

    <script src="${pageContext.request.contextPath}/static/js/chart.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/chart-data.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/easypiechart.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/easypiechart-data.js"></script>
</head>

<body>
<section class="content  col-lg-3 col-xs-12">
    <div class="box">
        <div class="panel panel-success col-lg-12  col-xs-12">
            <div class="panel-heading">
                <h3>DEVID:${ model['deviceId']}</h3>
                <h4 id="status">status:${ model['onlineStatus']}</h4>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="panel-body easypiechart-panel">
                            <div class="easypiechart" id="easypiechart-red" data-percent="0">

                            </div>
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="panel-body easypiechart-panel">
                            <h3>left:</h3>
                            <span class="percent" id="easypiechart-red-display">0s</span>
                        </div>
                    </div>
                </div>
                <div id="ctrl">
                    <hr>
                    <div class="row">

                        <div class="col-xs-6 ">
                            <b class="form-control a_demo_two" onclick="openAll();">open 10min</b>
                        </div>

                        <div class="col-xs-6 ">
                            <b class="form-control a_demo_two" onclick="closeAll();">close</b>
                        </div>

                    </div>
                    <%--<hr>--%>
                    <%--<div class="row">--%>

                    <%--<div class="col-xs-6 ">--%>
                    <%--<b class="form-control a_demo_two" onclick="open_a();">open A</b>--%>
                    <%--</div>--%>

                    <%--<div class="col-xs-6 ">--%>
                    <%--<b class="form-control a_demo_two" onclick="close_a();">close A</b>--%>
                    <%--</div>--%>

                    <%--</div>--%>
                    <%--<hr>--%>
                    <%--<div class="row">--%>

                    <%--<div class="col-xs-6 ">--%>
                    <%--<b class="form-control a_demo_two" onclick="open_b();">open B</b>--%>
                    <%--</div>--%>

                    <%--<div class="col-xs-6 ">--%>
                    <%--<b class="form-control a_demo_two" onclick="close_b();">close B</b>--%>
                    <%--</div>--%>

                    <%--</div>--%>
                </div>
                <div>
                    <br/>
                    <br/>
                    <h4>device info table</h4>
                    <tbody>
                    <tr>
                        <td>onlineStatus:${ model['onlineStatus']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>statusA:${ model['statusA']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>statusB:${ model['statusB']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderCreateTimeA:${ model['orderCreateTimeA']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderCreateTimeB:${ model['orderCreateTimeB']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderDurationSecA:${ model['orderDurationSecA']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderDurationSecB:${ model['orderDurationSecB']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>sigQuality:${ model['sigQuality']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>batteryLeftTime:${ model['batteryLeftTime']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>errorInfo:${ model['errorInfo']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>userIdA:${ model['userIdA']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>userIdB:${ model['userIdB']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderIdA:${ model['orderIdA']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>orderIdB:${ model['orderIdB']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>merchantName:${ model['merchantName']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>merchantAddress:${ model['merchantAddress']}</td>
                    </tr>
                    <br/>
                    <tr>
                        <td>poiid:${ model['poiid']}</td>
                    </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    var ctrlApi = "/demo/ctrl.inner";
    var resultApi = "/demo/result.inner";
    var deviceId = ${ model['deviceId']};
    var orderId;

    function openAll() {
        sendData = {
            actionMsg: 0,
            deviceId: deviceId
        };
        sendJsonData = (JSON.stringify(sendData));

        $.ajax({
            type: 'POST',
            url: ctrlApi,
            contentType: 'application/json',
            dataType: "json",
            data: sendJsonData,
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                orderId = dataObj.orderId;
                switch (dataObj.status) {
                    case 1:
                    {
                        alert("send open msg ok!");
                        setTimeout("getOrderInfo()", 1000);
                    }
                        break;

                    case 3:
                    {
                        alert("send open msg but device offline!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 11:
                    {
                        alert("device already open!" + " userId:" + dataObj.userId + " orderId:" + dataObj.orderId);
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 12:
                    {
                        alert("device already close!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;
                }
            }
        });
    }

    function delayRefresh(){
        window.location.reload();
    }

    function closeAll() {
        sendData = {
            actionMsg: 1,
            deviceId: deviceId
        };
        sendJsonData = (JSON.stringify(sendData));

        $.ajax({
            type: 'POST',
            url: ctrlApi,
            contentType: 'application/json',
            dataType: "json",
            data: sendJsonData,
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                switch (dataObj.status) {
                    case 1:
                    {
                        alert("send close msg ok!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 3:
                    {
                        alert("send open msg but device offline!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 11:
                    {
                        alert("device already open!" + " userId:" + dataObj.userId + " orderId:" + dataObj.orderId);
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 12:
                    {
                        alert("device already close!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;
                }
            }
        });
    }

    function getOrderInfo() {
        sendData = {
            orderId: orderId
        };
        sendJsonData = (JSON.stringify(sendData));

        $.ajax({
            type: 'POST',
            url: resultApi,
            contentType: 'application/json',
            dataType: "json",
            data: sendJsonData,
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                switch (dataObj.status) {
                    case 0:
                    {
                        alert("still wait for task execute...");
                        setTimeout("getOrderInfo()", 5000);
                    }
                        break;

                    case 5:
                    {
                        alert("task execute timeout,please reopen device!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;

                    case 6:
                    {
                        alert("task execute success!");
                        setTimeout("delayRefresh()", 1000);
                    }
                        break;
                }
            }
        });
    }
    //
    //    function open_a() {
    //        send_data = {
    //            which: 1,
    //            click: "open",
    //            deviceId: deviceId
    //        };
    //        send_json_data = (JSON.stringify(send_data));
    //
    //        $.ajax({
    //            type: 'POST',
    //            url: operate_api,
    //            contentType: 'application/json',
    //            dataType: "json",
    //            data: send_json_data,
    //            timeout: 10000,
    //            success: function (data) {
    //                var dataObj = eval(data);
    //                if (dataObj.status == 1) {
    //                    alert("send open msg ok!");
    //                    window.location.reload()
    //                }
    //            }
    //        });
    //    }
    //
    //    function close_a() {
    //        send_data = {
    //            which: 1,
    //            click: "close",
    //            deviceId: deviceId
    //        };
    //        send_json_data = (JSON.stringify(send_data));
    //
    //        $.ajax({
    //            type: 'POST',
    //            url: operate_api,
    //            contentType: 'application/json',
    //            dataType: "json",
    //            data: send_json_data,
    //            timeout: 10000,
    //            success: function (data) {
    //                var dataObj = eval(data);
    //                if (dataObj.status == 1) {
    //                    alert("send close msg ok!");
    //                    window.location.reload()
    //                }
    //            }
    //        });
    //    }
    //
    //    function open_b() {
    //        send_data = {
    //            which: 2,
    //            click: "open",
    //            deviceId: deviceId
    //        };
    //        send_json_data = (JSON.stringify(send_data));
    //
    //        $.ajax({
    //            type: 'POST',
    //            url: operate_api,
    //            contentType: 'application/json',
    //            dataType: "json",
    //            data: send_json_data,
    //            timeout: 10000,
    //            success: function (data) {
    //                var dataObj = eval(data);
    //                if (dataObj.status == 1) {
    //                    alert("send open msg ok!");
    //                    window.location.reload()
    //                }
    //            }
    //        });
    //    }
    //
    //    function close_b() {
    //        send_data = {
    //            which: 2,
    //            click: "close",
    //            deviceId: deviceId
    //        };
    //        send_json_data = (JSON.stringify(send_data));
    //
    //        $.ajax({
    //            type: 'POST',
    //            url: operate_api,
    //            contentType: 'application/json',
    //            dataType: "json",
    //            data: send_json_data,
    //            timeout: 10000,
    //            success: function (data) {
    //                var dataObj = eval(data);
    //                if (dataObj.status == 1) {
    //                    alert("send close msg ok!");
    //                    window.location.reload()
    //                }
    //            }
    //        });
    //    }

    var leftSec = -1;
    var totalSec = -1;

    $(document).ready(function () {
        setTimeout("init()", 100);
    });

    function init() {
        leftSec = ${ model['leftSec']};
        totalSec = ${ model['totalSec']};
        if (leftSec > 0) {
            setTimeout("clock()", 1000);
        }
    }

    <%--function init() {--%>
    <%--var status = ${ model['onlineStatus']};--%>
    <%--if (status == "offline") {--%>
    <%--$("#ctrl").hide();--%>
    <%--} else if (status == "online") {--%>
    <%--$("#ctrl").show();--%>
    <%--gettime();--%>
    <%--} else {--%>
    <%--$("#ctrl").hide();--%>
    <%--}--%>
    <%--}--%>

    <%--function gettime() {--%>
    <%--send_data = {--%>
    <%--"deviceId": deviceId--%>
    <%--};--%>
    <%--send_json_data = (JSON.stringify(send_data));--%>

    <%--$.ajax({--%>
    <%--type: 'POST',--%>
    <%--url: gettime_api,--%>
    <%--contentType: 'application/json',--%>
    <%--dataType: "json",--%>
    <%--data: send_json_data,--%>
    <%--timeout: 10000,--%>
    <%--success: function (data) {--%>
    <%--var dataObj = eval(data);--%>
    <%--left_sec = dataObj.left_sec;--%>
    <%--total_sec = dataObj.total_sec;--%>
    <%--if (left_sec > 0) {--%>
    <%--setTimeout("clock()", 1000);--%>
    <%--} else {--%>

    <%--}--%>
    <%--}--%>
    <%--});--%>
    <%--}--%>

    function clock() {
        var per = leftSec * 100 / totalSec;
        $('#easypiechart-red').data('easyPieChart').update(per);
        $('#easypiechart-red-display').text(leftSec + 's');
        if (leftSec <= 0) {
            leftSec = 0;
        } else {
            leftSec--;
            setTimeout("clock()", 1000);
        }
    }
</script>

</body>
</html>
